<template>
  <section>
    <el-form :model="ExportImportInfor" class="form_inline">
      <el-form-item label="导出字段" size="small" prop="xqId">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="excelColumn" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="item in labelValues" :label="item" :key="item.prop">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="选择项目" size="small" prop="xqId" v-if="$route.path=='/chart_statement'">
        <el-select v-model="formSearch.xqId" placeholder="请选择项目" @change="getXqId">
          <el-option v-for="item in xqTree" :label="item.name" :value="item.id" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收费科目" v-if="showCostItem">
        <el-cascader v-model="ExportImportInfor.costItemIds" :show-all-levels="false" size="small" clearable
                     :options="houseFixed" ref="costCascader" checkStrictly collapse-tags
                     :props="{ expandTrigger: 'hover', value: 'id', label: 'name', multiple: true}"/>
      </el-form-item>
      <el-form-item label="数量选择">
        <el-radio-group v-model="ExportImportInfor.excelExportRange">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">当前页</el-radio>
          <el-radio :label="3">页码</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label v-if="ExportImportInfor.excelExportRange==3" size="small">
        <el-input v-model.number="ExportImportInfor.excelBeginPage" placeholder="请输入起始页"></el-input>
        <span>-</span>
        <el-input v-model.number="ExportImportInfor.excelEndPage" placeholder="请输入结束页"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="closeDialog">取 消</el-button>
        <el-button size="small" @click="getexportHouseUser">确 定</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import store from "../assets/js/store";
import {getCostItemList, xqSelectList} from "../url/api";
export default {
  props: {
    typeExport: String,
    showCostItem: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      houseFixed: [],
      ExportImportInfor: {
        excelExportRange: 1,
        costItemIds: null,
      },
      excelColumn: [],
      cities: [],
      formSearch: {
        xqId: ""
      },
            xqTree: [],
      isIndeterminate: true, //全选，全部选
      checkAll: false,
      labelValues: ""
    };
  },
  methods: {
    getCostItemList() {
      getCostItemList({}).then(({data}) => {
        //固定费用收费科目下拉列表
        if (data.code === 200) {
          this.houseFixed = data.data.filter(item => item.children);
        }
      });
    },
    getXqId(val){
      console.log(val);
      this.$emit('getXqId',val)
    },
    getInit() {
          //初始化列表
          let org_tree1 = {};
          xqSelectList(org_tree1).then((res) => {
              //项目选择列表
              //console.log(res)
              if (res.data.ok) {
                  this.xqTree = res.data.data;
                  if (this.xqTree.length != 0) {
                      this.formSearch.xqId = this.xqTree[0].id;
                      this.$emit('getXqId', this.formSearch.xqId)
                      // this.getlist();
                  }
              }
          });
      },
    getexportHouseUser() {
      //导出数据
      if (this.ExportImportInfor.excelExportRange == 3) {
        if (!this.ExportImportInfor.excelBeginPage) {
          this.$message("请选择起始页");
          return;
        }
        if (!this.ExportImportInfor.excelEndPage) {
          this.$message("请选择结束页");
          return;
        }
      } else {
        this.ExportImportInfor.excelBeginPage = null;
        this.ExportImportInfor.excelEndPage = null;
      }
      this.ExportImportInfor.excelColumn = [];
      this.excelColumn.forEach(item => {
        let str = item.label + "@split@" + item.prop;
        this.ExportImportInfor.excelColumn.push(str);
      });
      this.$emit("getexportHouseUser", this.ExportImportInfor);
    },
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.labelValues.length;
    },
    handleCheckAllChange(val) {
      this.excelColumn = val ? this.labelValues : [];
      this.isIndeterminate = false;
    },
    closeDialog() {
      this.$emit("closeDialog", false);
    },
    getLabel() {
      if (this.typeExport == "house_user_householder_owner") {
        this.labelValues = store.state.labelValues;
      } else if (this.typeExport == "base_house") {
        this.labelValues = store.state.labelHouse;
      } else if (this.typeExport == "sys_manager") {
        this.labelValues = store.state.labelyuangong;
      } else if (this.typeExport == "house_user_tenant_sub") {
        this.labelValues = store.state.labelzuhu;
      } else if (this.typeExport == "bill_export") {
        this.labelValues = store.state.labelBill;
      } else if (this.typeExport == "vote_export") {
        this.labelValues = store.state.voteLabel;
      } else if (this.typeExport == "base_house") {
        this.labelValues = store.state.labelHouse;
      } else if (this.typeExport == "export_sub") {
        this.labelValues = store.state.exportHouseUser;
      } else if (this.typeExport == "export_owner") {
        this.labelValues = store.state.exportHouseUser;
      }
    }
  },
  watch: {
    typeExport() {
      this.getLabel();
    }
  },
  created() {
    this.getCostItemList();
  },
  mounted() {
    console.log("----------------", this.typeExport);
    this.getLabel();
     this.getInit();

    // voteLabel
  }
};
</script>

<style>
</style>
